<template>
  <div class="drawer">
    <el-drawer v-model="showDrawer" title="触发详情" :size="1000" @close="close" :append-to-body='true'>
      <!-- 搜索 -->
      <el-form :model="formData" class="formInline">
          <el-row :gutter="20">
              <el-col :span="6">
              <el-form-item label="消息类型" prop="msgtype">
                  <el-select style="width:100%" v-model="formData.msgtype" placeholder="请选择">
                  <el-option v-for="item in takeover" :key="item.value" :label="item.name" :value="item.value"> </el-option>
                  </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="6">
              <el-form-item label="消息搜索" prop="keyword">
                  <el-input v-model="formData.keywords" placeholder="请输入内容" clearable></el-input>
              </el-form-item>
              </el-col>
              <!-- 时间筛选 -->
              <el-col :span="7">
              <el-form-item label="时间筛选" class="selectTime" prop="start_time">
                  <el-date-picker v-model="formData.msgtime" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
              </el-form-item>
              </el-col>
              <el-col :span="5">
              <el-form-item class="check-box">
                  <el-button type="primary" @click="getList">查询</el-button>
                  <el-button @click="reset">清空</el-button>
              </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <div class="layout">
        <ul class="scroll1 record">
          <li v-for="item in violationData" :key="item.id">
            <div class="center">
              <span>{{ item.created_at }}</span>
            </div>
            <div class="wrap-box" :class="{ active: item.msgid == props.msgid }">
              <!-- 文本 -->
              <template v-if="item.msgtype === 1">
                <div class="box_right" v-if="item.from_type == 1">
                  <div class="triangle_right"></div>
                  <div class="box2_right">
                    <span class="text1_right">{{ item.name || '机器人' }}</span>
                    <!-- <template v-if="item.text.length > 4 && item.text.match(/\[.+?\]/g)">
                      <span class="white_emoji">
                        <template v-for="(v, index) in item.text.match(/\[.+?\]/g)" :key="index">
                          <span>
                            <img :src="getEmojiUrl(v)" :alt="v" style="width: 20px; height: 20px; line-height: 20px" />
                          </span>
                        </template>
                      </span>
                    </template>
                    <img v-if="getEmojiUrl(item.text)" class="white_rights" :src="getEmojiUrl(item.text)" :alt="item.text" />
                    <div v-if="!getEmojiUrl(item.text) && !item.text.match(/\[.+?\]/g)" class="white_right"> {{ item.text }}</div> -->

                    <template v-if="item.text.length > 0">
                      <span class="white_emoji">
                        <!-- <template v-for="(v, index) in item.text.split(/\[.+?\]/g)" :key="index"> -->
                        <template v-for="(v, index) in formatText(item.text)" :key="index">
                          <span>
                            <img v-if="!!/static/.test(getEmojiText(v))" :src="getEmojiText(v)" :alt="v" style="width: 20px; height: 20px; line-height: 20px" />
                            <span v-else>{{getEmojiText(v)}}</span>
                          </span>
                        </template>
                      </span>
                    </template>

                  </div>
                  <el-image class="img_right" :src="item.avatar">
                    <template #error>
                      <el-image src="/static/file/pic.png"></el-image>
                    </template>
                  </el-image>
                </div>
                <div class="box" v-else>
                  <div class="triangle"></div>
                  <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                  <div class="box2">
                    <span class="text1">{{ item.name }}</span>
                    <!-- <div class="white"> {{ item.text }} </div> -->
                    <template v-if="item.text.length > 4 && item.text.match(/\[.+?\]/g)">
                      <span class="white_lemoji">
                        <template v-for="(v, index) in item.text.match(/\[.+?\]/g)" :key="index">
                          <span>
                            <img :src="getEmojiUrl(v)" :alt="v" style="width: 20px; height: 20px; line-height: 20px" />
                          </span>
                        </template>
                      </span>
                    </template>
                    <img v-if="getEmojiUrl(item.text)" class="whites" :src="getEmojiUrl(item.text)" :alt="item.text" />
                    <div v-if="!getEmojiUrl(item.text) && !item.text.match(/\[.+?\]/g)" class="white"> {{ item.text }}</div>
                  </div>
                </div>
              </template>
              <!-- 图片 -->
              <template v-if="item.msgtype === 2">
                <div class="picture_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <el-image :src="item.media_path" :previewSrcList="[item.media_path]" style="width: 150px; height: 150px"></el-image>
                      <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="picture" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <el-image :src="item.media_path" :previewSrcList="[item.media_path]" style="width: 150px; height: 150px"></el-image>
                      <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                    </div>
                  </div>
                </div>
              </template>
              <!-- <audio autoplay src="/static/voice.mp3" controls> 您的浏览器不支持播放 </audio> -->
              <!-- 语音 -->
              <template v-if="item.msgtype === 5">
                <div class="voice_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="voiceted_right" @click="palyAudio(item)">
                        <!-- item.media_path -->
                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                        <audio ref="onaudio" class="audio_con_right" :class="'audio_box_' + item.id" :src="item.media_path" controls> 您的浏览器不支持播放 </audio>
                        <img src="@/assets/chatDetails/voice.png" style="width: 11px; height: 15px" />
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="voice" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="voiceted" @click="palyAudio(item)">
                        <!-- item.media_path -->
                        <audio ref="onaudio" class="audio_con" :class="'audio_box_' + item.id" :src="item.media_path" controls> 您的浏览器不支持播放 </audio>
                        <img src="@/assets/chatDetails/voice.png" style="width: 11px; height: 15px" />
                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 视频 -->
              <template v-if="item.msgtype === 6">
                <div class="gif" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="video_box_right" @click.prevent="playVideo(item)">
                        <div class="play_right"></div>
                        <el-image :src="getVideoImage(item.media_path, 140, 100)">
                          <template #error>
                            <el-image src="/static/file/mov.png"></el-image>
                          </template>
                        </el-image>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="gif" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="video_box" @click.prevent="playVideo(item)">
                        <div class="play"></div>
                        <el-image class="wel_content_file_item" :src="getVideoImage(item.media_path, 140, 100)">
                          <template #error>
                            <el-image src="/static/file/mov.png"></el-image>
                          </template>
                        </el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 文件txt -->
              <template v-if="item.msgtype === 10">
                <div class="txt_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="texttxt_right" @click="lookFile(item)">
                        <div style="display: flex">
                          <div style="display: flex; flex-direction: column"
                            ><span>{{ JSON.parse(item.msgdata)?.filename }}</span
                            ><span style="margin-top: 10px">{{ (JSON.parse(item.msgdata)?.filesize / 1024 / 1024).toFixed(2) }}M</span></div
                          >
                          <img :src="getSuffixIcon(item.media_path)" style="width: 40px; height: 40px; margin-left: 40px" />
                        </div>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> <div class="triangle_right"></div>
                  </div>
                </div>
                <div class="txt" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" /> <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="texttxt" @click="lookFile(item)">
                        <div style="display: flex">
                          <div style="display: flex; flex-direction: column"
                            ><span>{{ JSON.parse(item.msgdata)?.filename }}</span
                            ><span style="margin-top: 10px">{{ (JSON.parse(item.msgdata)?.filesize / 1024 / 1024).toFixed(2) }}M</span></div
                          >
                          <img :src="getSuffixIcon(item.media_path)" style="width: 40px; height: 40px; margin-left: 40px" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 链接 -->
              <template v-if="item.msgtype === 11">
                <div class="link_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="links_right" @click="lookLink(item)">
                        <div>
                          <div>{{ JSON.parse(item.msgdata)?.title }}</div>
                          <div style="display: flex; margin-top: 11px">
                            <div class="linkss_right">{{ JSON.parse(item.msgdata)?.link_url }}</div>
                            <img style="width: 50px; height: 50px" :src="JSON.parse(item.msgdata)?.image_url" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="link" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="links" @click="lookLink(item)">
                        <div>
                          <div>{{ JSON.parse(item.msgdata)?.title }}</div>
                          <div style="display: flex; margin-top: 11px">
                            <div class="linkss">{{ JSON.parse(item.msgdata)?.link_url }}</div>
                            <img style="width: 50px; height: 50px" :src="JSON.parse(item.msgdata)?.image_url" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 小程序消息 -->
              <template v-if="item.msgtype === 12">
                <div class="applet_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="applets_right">
                        <div style="margin-left: 18px">
                          <div style="margin-top: 11px">
                            <img class="app-img_right" src="@/assets/chatDetails/Appletbg.png" />
                            <span class="app-title_right">{{ JSON.parse(item.msgdata)?.title }}</span>
                          </div>
                          <div style="margin: 8px 0 11px">{{ JSON.parse(item.msgdata)?.description }}</div>
                          <img src="@/assets/chatDetails/appletcurrency.png" />
                          <div class="app_line_right"></div>
                          <img class="app_simg_right" src="@/assets/chatDetails/Applet.png" />
                          <span class="app-text_right">小程序</span>
                        </div>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="applet" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="applets">
                        <div style="margin-left: 18px">
                          <div style="margin-top: 11px">
                            <img class="app-img" src="@/assets/chatDetails/Appletbg.png" />
                            <span class="app-title">{{ JSON.parse(item.msgdata)?.title }}</span>
                          </div>
                          <div style="margin: 8px 0 11px">{{ JSON.parse(item.msgdata)?.description }}</div>
                          <img src="@/assets/chatDetails/appletcurrency.png" />
                          <div class="app_line"></div>
                          <img class="app_simg" src="@/assets/chatDetails/Applet.png" />
                          <span class="app-text">小程序</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 红包 -->
              <template v-if="item.msgtype === 19">
                <div class="noredenvelopes_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="noenvelopes_right">
                        <div class="noenvelopes-layout_right">
                          <img style="width: 40px; height: 40px" src="@/assets/chatDetails/yredenvelopes.png" />
                          <div class="spot_right">{{ item.text }}</div>
                        </div>
                        <div style="margin: 0 20px">
                          <div class="noenvelopes-line_right"></div>
                          <div class="noenvelopes-text_right">红包</div>
                        </div>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> <div class="redtriangle_right"></div>
                  </div>
                </div>
                <div class="noredenvelopes" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" /> <div class="redtriangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="noenvelopes">
                        <div class="noenvelopes-layout">
                          <img style="width: 40px; height: 40px" src="@/assets/chatDetails/yredenvelopes.png" />
                          <div class="spot">{{ item.text }}</div>
                        </div>
                        <div style="margin: 0 20px">
                          <div class="noenvelopes-line"></div>
                          <div class="noenvelopes-text">红包</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </li>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

  <script setup lang="ts">
    import { qrcanvas } from 'qrcanvas'
    import { getVideoImage, getSuffixIcon } from '@/utils/utils'
    import { ref, inject, watch, reactive } from 'vue'
    import { getEmojiUrl, getEmojiText, formatText } from '@/utils/emoji'
    import { getViolationContext } from '@/api/employe/riskmonitoring/violationMonitoring'
    import { getMessageType } from '@/api/employe/riskmonitoring/messagearchiving'
    const showDrawer = ref(false)
    const videoWicketRef = ref(null)
    const dialogImageUrl = ref('')
    const dialogTitle = ref('图片预览')
    const dialogWidth = ref('')
    const dialogVisible = ref(false)
    const props = defineProps(['msgid',])
    const violationData = ref([])
    const formData = reactive({
      cust_id:'',
      staff_id:'',
      msgid:'',
      msgtype: '',
      keywords: '',
      msgtime: []
    })
    let takeover: any = ref([])
  getMessageType().then((data: any) => {
    takeover.value = data
  })
  const query = () => {
  }
    // 清空数据
    const reset = () => {
    paged.value = 1
    pageg.value = 1
    formData.msgtype = ''
    formData.keywords = ''
    formData.msgtime = []
    start.value = false
    getList()
    start.value = true
  }
    // 视频播放
    const playVideo = (item: any) => {
      console.log('视频播放', item.media_path)
      videoWicketRef.value.videoCheck = true
      videoWicketRef.value.video_url = item.media_path
      videoWicketRef.value.getTime()
    }
    // 播放语音
    const palyAudio = (item: any) => {
      let dom = document.querySelector('.audio_box_' + item.id)
      if (dom.paused) {
        console.log('pause')
        dom.play()
      } else {
        console.log('play')
        dom.pause()
      }
    }
    // 文件
    const lookFile = (item: any) => {
      window.open(item.media_path)
    }
    // 生成二维码
    const lookLink = (data: any) => {
      const item = JSON.parse(data.msgdata)
      const src = creatQrCode(item.link_url)
      dialogVisible.value = true
      dialogImageUrl.value = src!
      dialogTitle.value = '查看链接'
      dialogWidth.value = '350px'
    }
    // 查看图片
    const lookPic = (data: any) => {
      dialogVisible.value = true
      dialogImageUrl.value = data.media_path
      dialogTitle.value = '查看图片'
    }
    const creatQrCode = (data: any) => {
      return qrcanvas({
        data,
        size: 100
      }).toDataURL('image/png')
    }
    //查看上下文
   const getContext = (val:any,id:any) => {
    formData.cust_id = val.cust_id,
    formData.staff_id = id,
    formData.msgid = val.msgid
    getList()
   }
   const getList = () => {
    let params = {
        cust_id: formData.cust_id,
        staff_id: formData.staff_id,
        msgid: formData.msgid,
        msgtype: formData.msgtype,
        keywords: formData.keywords,
        msgtime: formData.msgtime,
        page: 1,
        page_size: 100
    }
    getViolationContext(params).then((res:any) => {
        violationData.value = res.data
    })
   }
    const paged = ref(1)
    const pageg = ref(1)
    let start = ref(true)
    // 关闭的时候将页码重置
    const close = () => {
      pageg.value = 1
      paged.value = 1
    }
    defineExpose({
      showDrawer,
      start,
      getContext
    })
    watch(showDrawer, (val) => {
      if (val) {
        setTimeout(() => {
          document.querySelector('.wrap-box.active').scrollIntoView({
            behavior: 'smooth'
          })
        }, 300)
      }
    })
  </script>

  <style>
    .drawer .el-drawer {
      background-color: #f9f9f9;
    }
  </style>
  <style lang="scss" scoped>
    .formInline {
        position:absolute;
        padding: 10px;
        background-color: #f9f9f9;
        z-index:99;
    }
    .wrap-box.active .white_right {
      color: #f9624b !important;
    }
    .wrap-box.active .white {
      color: #f9624b !important;
    }
    :deep(.drawer) {
      background-color: #f9f9f9;
    }
    .layout {
      // position: relative;
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      .el-dialog--center .el-dialog__body img {
        width: 300px;
        height: 300px;
      }
      .record {
        padding: 10px 30px 0;
        margin-top: 16px;
        .center span {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 30px;
          font-size: 13px;
          color: #969696;
        }
        .box_right {
          display: flex;
          position: relative;
          justify-content: flex-end;
          .triangle_right {
            width: 0;
            height: 0;
            border-left: 6px solid #ffffff;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            position: absolute;
            right: 46px;
            top: 23px;
          }
          .redtriangle_right {
            width: 0;
            height: 0;
            border-left: 6px solid #f9624b;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            position: absolute;
            right: 46px;
            top: 23px;
          }
          .img_right {
            width: 40px;
            height: 40px;
            margin-left: 7px;
            border-radius: 4px;
          }
          .box2_right {
            display: flex;
            flex-direction: column;
            margin-right: 5px;
            .text1_right {
              color: #969696;
              font-size: 12px;
              margin-bottom: 3px;
              text-align: right;
            }
            .video_box_right {
              position: relative;
              width: 140px;
              height: 100px;
              cursor: pointer;
              .play_right {
                width: 25px;
                height: 25px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: url('@/assets/image/material/play.png') no-repeat;
                background-size: cover;
                z-index: 1;
              }
            }
            .white_right {
              background-color: #fff;
              color: #000000;
              max-width: 300px;
              word-break: break-all;
              padding: 6px 12px;
              border-radius: 6px;
              font-size: 16px;
              line-height: 20px;
              font-family: STHeitiSC-Medium, STHeitiSC;
              font-weight: 500;
              text-align: right;
              // display: inline-flex;
            }
            .white_rights {
              background-color: #fff;
              color: #000000;
              max-width: 300px;
              word-break: break-all;
              display: inline-flex;
              padding: 6px 12px;
              border-radius: 6px;
              font-size: 16px;
              line-height: 20px;
              font-family: STHeitiSC-Medium, STHeitiSC;
              font-weight: 500;
              width: 20px;
              height: 20px;
            }
            .white_emoji {
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #fff;
              padding: 6px 12px;
              border-radius: 6px;
            }
          }
        }
        .box {
          display: flex;
          position: relative;
          .img {
            width: 40px;
            height: 40px;
            margin-right: 7px;
            border-radius: 4px;
          }
          .triangle {
            width: 0;
            height: 0;
            border-right: 6px solid #ffffff;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            position: absolute;
            left: 46px;
            top: 23px;
          }
  
          .redtriangle {
            width: 0;
            height: 0;
            border-right: 6px solid #f9624b;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            position: absolute;
            left: 46px;
            top: 23px;
          }
  
          .box2 {
            display: flex;
            flex-direction: column;
            margin-left: 5px;
            .video_box {
              position: relative;
              width: 140px;
              height: 100px;
              cursor: pointer;
  
              .play {
                width: 25px;
                height: 25px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: url('@/assets/image/material/play.png') no-repeat;
                background-size: cover;
                z-index: 1;
              }
            }
  
            .text1 {
              color: #969696;
              font-size: 12px;
              margin-bottom: 3px;
            }
            .white {
              text-align: left;
              background-color: #fff;
              color: #000000;
              max-width: 300px;
              word-break: break-all;
              display: inline-flex;
              padding: 6px 12px;
              border-radius: 6px;
              font-size: 16px;
              line-height: 20px;
              font-family: STHeitiSC-Medium, STHeitiSC;
              font-weight: 500;
            }
            .whites {
              text-align: left;
              background-color: #fff;
              color: #000000;
              max-width: 300px;
              word-break: break-all;
              display: inline-flex;
              padding: 6px 12px;
              border-radius: 6px;
              font-size: 16px;
              line-height: 20px;
              font-family: STHeitiSC-Medium, STHeitiSC;
              font-weight: 500;
              width: 20px;
              height: 20px;
            }
            .white_lemoji {
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #fff;
              padding: 6px 12px;
              border-radius: 6px;
            }
          }
        }
        .picture {
          position: relative;
        }
        .gif {
          position: relative;
          .gifimg {
            width: 113.4px;
            height: 77px;
          }
        }
        .businesscard {
          position: relative;
          .text1 {
            color: #969696;
            font-size: 12px;
            margin-bottom: 3px;
            margin-left: 4px;
          }
          .box3 {
            width: 186px;
            height: 99px;
            margin-left: 4px;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            padding: 11px 0 0 18px;
            .text2 {
              font-size: 16px;
              color: #000000;
              margin-bottom: 10px;
            }
            .card {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 120px;
              height: 52px;
              border: 1px solid #eaeaea;
              padding: 0 13px;
            }
          }
        }
        .discerntext {
          margin-top: 18px;
          position: relative;
          .discern {
            width: 163px;
            height: 38px;
            background-color: #ffffff;
            line-height: 38px;
            text-align: center;
          }
        }
        .notconnected {
          margin-top: 18px;
          position: relative;
          .nconnected {
            width: 120px;
            height: 38px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 17px;
          }
        }
        .fconnected {
          margin-top: 18px;
          position: relative;
          .connected {
            width: 155px;
            height: 38px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
          }
        }
        .cancelvideo {
          margin-top: 18px;
          position: relative;
          .cancel {
            width: 98px;
            height: 38px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
          }
        }
        .voice {
          margin-top: 18px;
          position: relative;
          .voiceted {
            width: 100px;
            height: 38px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            position: relative;
            cursor: pointer;
            .audio_con {
              position: absolute;
              left: 5px;
              top: 4px;
              width: 250px;
              height: 30px;
              z-index: -1;
              opacity: 0;
            }
          }
        }
        .voice_right {
          margin-top: 18px;
          position: relative;
          .voiceted_right {
            width: 100px;
            height: 38px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            position: relative;
            cursor: pointer;
            .audio_con_right {
              position: absolute;
              left: 5px;
              top: 4px;
              width: 250px;
              height: 30px;
              z-index: -1;
              opacity: 0;
            }
          }
        }
        .txt {
          margin-top: 18px;
          position: relative;
          .texttxt {
            // width: 210px;
            // height: 50px;
            background-color: #ffffff;
            padding: 10px 14px;
            line-height: 15px;
            max-width: 230px;
            word-break: break-all;
            display: inline-flex;
            border-radius: 6px;
          }
        }
        .txt_right {
          margin-top: 18px;
          position: relative;
          .texttxt_right {
            // width: 210px;
            // height: 50px;
            background-color: #ffffff;
            padding: 10px 14px;
            line-height: 15px;
            max-width: 230px;
            word-break: break-all;
            display: inline-flex;
            border-radius: 6px;
          }
        }
        .red {
          margin-top: 18px;
          position: relative;
          .nored {
            width: 270px;
            height: 110px;
            background-color: #ffffff;
            padding: 0 14px;
          }
        }
        .mixedmessage {
          margin-top: 18px;
          position: relative;
          .message {
            width: 270px;
            height: 147px;
            background-color: #ffffff;
  
            .bg {
              width: 243px;
              height: 99px;
              border: 1px solid #f3f3f3;
              background-color: #fff4ef;
              text-align: center;
              line-height: 99px;
            }
          }
        }
        .groupchat {
          margin-top: 18px;
          position: relative;
          .chat {
            width: 240px;
            height: 106px;
            background-color: #ffffff;
          }
        }
        .schedule {
          margin-top: 19px;
          width: 378px;
          height: 162px;
          background-color: #ffffff;
          overflow: hidden;
          vertical-align: middle;
          position: relative;
          .radius {
            display: inline-block;
            width: 2px;
            height: 2px;
            background-color: #979797;
            border-radius: 50%;
            margin-right: 10px;
          }
        }
        .mycard {
          margin-top: 18px;
          position: relative;
          .personal {
            width: 230px;
            height: 105px;
            background-color: #ffffff;
          }
        }
        .noredenvelopes {
          margin-top: 18px;
          position: relative;
          .noenvelopes {
            width: 260px;
            height: 89px;
            background-color: #f9624b;
            .noenvelopes-layout {
              display: flex;
              margin: 12px 0 0 15px;
            }
            .spot {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #fff0ce;
              line-height: 40px;
            }
            .noenvelopes-line {
              border-bottom: 1px solid #fa8978;
              margin: 7px 0;
            }
            .noenvelopes-text {
              color: #ffebeb;
              font-size: 12px;
            }
          }
        }
        .noredenvelopes_right {
          margin-top: 18px;
          position: relative;
          .noenvelopes_right {
            width: 260px;
            height: 89px;
            background-color: #f9624b;
            .noenvelopes-layout_right {
              display: flex;
              margin: 12px 0 0 15px;
            }
            .spot_right {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #fff0ce;
              line-height: 40px;
            }
            .noenvelopes-line_right {
              border-bottom: 1px solid #fa8978;
              margin: 7px 0;
            }
            .noenvelopes-text_right {
              color: #ffebeb;
              font-size: 12px;
            }
          }
        }
        .redenvelopes {
          margin-top: 18px;
          position: relative;
          .envelopes {
            width: 260px;
            height: 89px;
            background-color: #faab9f;
            .spot {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #fff0ce;
              line-height: 40px;
            }
          }
        }
  
        .link {
          margin-top: 18px;
          position: relative;
          .links {
            background-color: #ffffff;
            cursor: pointer;
            border-radius: 6px;
            padding: 10px 14px;
  
            .linkss {
              max-width: 180px;
              word-break: break-all;
              color: #969696;
              font-size: 12px;
            }
          }
        }
        .link_right {
          margin-top: 18px;
          position: relative;
          .links_right {
            background-color: #ffffff;
            cursor: pointer;
            border-radius: 6px;
            padding: 10px 14px;
  
            .linkss_right {
              max-width: 180px;
              word-break: break-all;
              color: #969696;
              font-size: 12px;
            }
          }
        }
      }
      .button {
        height: 45px;
        border-top: 1px solid #eaeaea;
        width: 100%;
        background-color: #f6f6f6;
        // text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .scroll1 {
        // height: 624px;
        height: calc(100vh - 128px);
        overflow: scroll;
        // height: calc(74% - 36px);
        // overflow-y: scroll;
      }
      .apply {
        margin-top: 18px;
        position: relative;
        .applys {
          width: 270px;
          height: 106px;
          background-color: #ffffff;
        }
      }
      .applet {
        margin-top: 18px;
        position: relative;
        .applets {
          width: 260px;
          height: 283px;
          background-color: #ffffff;
          .app-img {
            width: 21px;
            height: 20px;
            vertical-align: middle;
          }
          .app-title {
            color: #969696;
            font-size: 12px;
            margin-left: 8px;
          }
          .app_line {
            border-bottom: 1px solid #eaeaea;
            margin: 7px 0;
          }
          .app_simg {
            vertical-align: middle;
            margin-right: 4px;
          }
          .app-text {
            color: #969696;
            font-size: 12px;
          }
        }
      }
      .applet_right {
        margin-top: 18px;
        position: relative;
        .applets_right {
          width: 260px;
          height: 283px;
          background-color: #ffffff;
          .app-img_right {
            width: 21px;
            height: 20px;
            vertical-align: middle;
          }
          .app-title_right {
            color: #969696;
            font-size: 12px;
            margin-left: 8px;
          }
          .app_line_right {
            border-bottom: 1px solid #eaeaea;
            margin: 7px 0;
          }
          .app_simg_right {
            vertical-align: middle;
            margin-right: 4px;
          }
          .app-text_right {
            color: #969696;
            font-size: 12px;
          }
        }
      }
    }
    .selectTime {
      :deep(.el-form-item__content) {
        display: flex;
        align-items: center;
        .text-center {
          min-width: 14px;
          margin: 0 13px;
          border-top: 1px solid #969696;
        }
      }
    }
  </style>
  